<template>
  <div class="modification-dialog">
    <eleDialog ref="dialogRef">
      <template #header>
        <p class="title">{{ props.appointmentData.name }} 信息即评价</p>
      </template>
      <template #content>
        <div class="content">
          <el-form
            label-width="100px"
            :model="articleForm"
            ref="articleFormRef"
            :rules="rules"
            :hide-required-asterisk="true"
          >
            <el-form-item label="预计消费金额" type="number" prop="consumption">
              <el-input v-model.number="articleForm.consumption"></el-input>
            </el-form-item>

            <el-form-item label="服务态度评价" prop="attitude">
              <el-input
                v-model="articleForm.attitude"
                type="textarea"
                placeholder="输入服务态度评价..."
              ></el-input>
            </el-form-item>

            <el-form-item label="反馈 & 意见" prop="feedback">
              <el-input
                v-model="articleForm.feedback"
                type="textarea"
                placeholder="输入反馈或意见..."
              ></el-input>
            </el-form-item>

            <!-- 封面这里也要加一个校验规则 -->
            <el-form-item label="使用体验评分">
              <el-rate v-model="rate" />
            </el-form-item>

            <el-form-item>
              <el-button size="medium" type="primary" @click="submit">立即发布</el-button>
              <el-button size="medium" @click="cancel">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <!-- <template #footer>sdfsdf</template> -->
    </eleDialog>
  </div>
</template>

<script setup lang="ts">
import eleSingleUpload from "@/components/ele-singleUpload/ele-singleUpload.vue"
import eleDialog from "@/components/ele-dialog/ele-dialog.vue"

import { InnerConfirm, messageReminder } from "@/utils/notificationHint"
import type { FormInstance, FormRules } from "element-plus"
import { computed, reactive, ref } from "vue"
import { updateAvatar, updateName } from "@/service/user/user"
import type { IUserInfo } from "../type"
import { localCache } from "@/utils/cacheData"
import { addAuthority } from "@/service/studyRoom/studyRoom"
import useStudyRoomStore from "@/store/main/studyRoom/studyRoom"

const studyRoomStore = useStudyRoomStore()

interface IProps {
  appointmentData: any
}
const props = withDefaults(defineProps<IProps>(), {})

const dialogRef = ref<InstanceType<typeof eleDialog>>()

// uploadRef.value.coverUrl

const rate = ref()

interface IArticleForm {
  feedback: string
  attitude: string
  consumption: string
}
const articleFormRef = ref<FormInstance>()
// 提交活动收集的表单
let articleForm = reactive<IArticleForm>({
  feedback: "",
  attitude: "",
  consumption: ""
})

// 校验规则
const rules = reactive<FormRules<IArticleForm>>({
  feedback: [{ required: true, message: "请输入自习室的意见反馈", trigger: "blur" }],
  attitude: [{ required: true, message: "请输入自习室的服务态度", trigger: "blur" }],
  consumption: [
    { required: true, message: "请输入预计消费的金额", trigger: "blur" },
    { type: "number", message: "活动人数必须为数字值", trigger: "blur" }
  ]
})

async function submit() {
  if (!articleFormRef.value) return
  await articleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      const data = {
        room_uid: props.appointmentData.user.id,
        room_id: props.appointmentData.id,
        rate: rate.value,
        feedback: articleForm.feedback,
        attitude: articleForm.attitude,
        consumption: articleForm.consumption
      }
      console.log("releaseArticle", data)

      await studyRoomStore.evaluateStudyRoom(data)
      articleForm.feedback = ""
      articleForm.attitude = ""
      articleForm.consumption = ""
      rate.value = ""
      articleFormRef!.value!.resetFields()
      // 关闭弹窗
      dialogRef.value!.showDialog = false
      messageReminder({
        message: "感谢您的尊贵评价！",
        type: "success"
      })
    } else {
      messageReminder({
        message: `提交失败！${fields}`,
        type: "error"
      })
    }
  })
}
function cancel() {
  InnerConfirm("此操作将重置前面填的内容, 是否继续?").then(() => {
    articleForm.feedback = ""
    articleForm.attitude = ""
    articleForm.consumption = ""
    rate.value = ""
    articleFormRef!.value!.resetFields()
    messageReminder({
      message: "重置成功!",
      type: "success"
    })
  })
}

defineExpose({
  dialogRef
})
</script>

<style lang="less" scoped>
.modification-dialog {
  .title {
    margin: 16px 0;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
  }

  .content {
    padding: 0 20px;

    // .img {
    //   width: 70px;
    //   height: 70px;
    //   border-radius: 50%;
    //   margin-right: 10px;
    // }
  }
}
</style>
